interface Props {
	isView?: boolean;
}

import { ProForm, ProFormDependency, ProFormInstance, ProFormList, ProFormText } from "@ant-design/pro-components";
import styles from "./index.module.less";
import { useEffect, useRef, useState } from "react";
import { Space, Image, Button, Affix, Flex, message } from "antd";
import Upload from "@/components/Upload";
import { CheckCircleOutlined } from "@ant-design/icons";
import { MAIN_PRIMARY_COLOR } from "@/enums";
import { useRequest } from "ahooks";
import { getEntryList, saveEntryList } from "@/api/modules/operationConfig";
import Loading from "@/components/Loading";
import { join, map, isEmpty } from "lodash";
import { RESULT_CODES } from "@/api/helper/ResultCode";

export default (props: Props) => {
	const formRef = useRef<ProFormInstance | undefined>();
	const { data, loading, run } = useRequest(getEntryList);
	const { loading: editLoading, runAsync } = useRequest(saveEntryList, { manual: true });
	const [isEdit, setIsEdit] = useState(false);

	useEffect(() => {
		if (!isEmpty(data?.data)) {
			formRef.current?.setFieldsValue({
				menus: data?.data
			});
		}
	}, [data]);

	const handleBack = () => {
		setIsEdit(false);
		run();
	};

	const handleSubmit = () => {
		formRef.current?.validateFieldsReturnFormatValue?.().then(values => {
			runAsync(values).then((res: any) => {
				if (res?.code === RESULT_CODES.SUCCESS) {
					message.success("保存成功");
					setIsEdit(false);
				}
			});
		});
	};
	return (
		<Loading isHeight100={true} loading={loading}>
			<div className={styles.container}>
				<div className={styles.msg}>建议尺寸：126*126px，小于3M的JPG/PNG格式图片</div>
				<ProForm
					className={styles.form}
					submitter={false}
					formRef={formRef}
					initialValues={{ menus: new Array(1).fill({}) }}
					layout="horizontal"
					disabled={!isEdit}
				>
					<ProFormList
						creatorButtonProps={!isEdit ? false : {}}
						max={10}
						name="menus"
						deleteIconProps={false}
						copyIconProps={false}
					>
						{(meta, index, action, count) => {
							return (
								<>
									<Space className={styles.space1} size={20} align="center">
										<ProForm.Item
											name="menus_icon"
											label={`${index > 8 ? "" : "0"}${index + 1}`}
											rules={[{ required: true, message: "" }]}
										>
											<Upload canRemove={isEdit} maxCount={1} resFormat={res => join(map(res, "url"), ",")} />
										</ProForm.Item>
										<Space className={styles.space2} direction="vertical" size={14}>
											<ProFormText
												label="名称"
												rules={[
													{ required: true, message: "" },
													{ max: 6, message: "最多输入6个字符" }
												]}
												name="menus_name"
												fieldProps={{
													showCount: true,
													maxLength: 6
												}}
											/>

											<ProFormText label="链接" rules={[{ required: true, message: "" }]} name="menus_url" />
										</Space>
										{isEdit && (
											<div className={styles.del}>
												<a style={{ color: "#EE3C36" }} onClick={() => action.remove(index)}>
													删除
												</a>
											</div>
										)}
									</Space>
								</>
							);
						}}
					</ProFormList>
				</ProForm>
				<Affix offsetBottom={0}>
					<Flex justify="center" className={styles.btns}>
						<Space size={10}>
							{isEdit ? (
								<>
									<Button ghost type="primary" onClick={() => handleBack()}>
										取消
									</Button>
									<Button loading={editLoading} ghost type="primary" onClick={() => handleSubmit()}>
										保存发布
									</Button>

									{/* <Space size={10}>
										<CheckCircleOutlined style={{ color: MAIN_PRIMARY_COLOR }} />
										<span style={{ color: "#000" }}>最后保存于2024-05-26</span>
									</Space> */}
								</>
							) : (
								<Button onClick={() => setIsEdit(true)} type="primary">
									编辑
								</Button>
							)}
						</Space>
					</Flex>
				</Affix>
			</div>
		</Loading>
	);
};
